<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
			href="../extjs/resources/css/ext-all.css" type="text/css"></link>
<style type="text/css">
.search-item {
    font:normal 12px tahoma, arial, helvetica, sans-serif;
    padding:3px 10px 3px 10px;
    border:1px solid #fff;
    border-bottom:1px solid #eeeeee;
    white-space:normal;
    color:#555;
}
.search-item h3 {
    display:block;
    font:inherit;
    font-weight:bold;
    color:#222;
}

.search-item h3 span {
    float: right;
    font-weight:normal;
    margin:0 0 5px 5px;
    width:100px;
    display:block;
    clear:none;
}
</style>
</head>
<body>
 <script type="text/javascript"
			src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="../extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../extjs/ux/ux-all.js"></script>
<script type="text/javascript" src="../js/component/H.js"></script>
</body>
<script type="text/javascript">
	var nums = {};
	var queryStr = '<%=request.getParameter("query")%>';
	var leftNum = '<%=request.getParameter("leftNum")%>'== 'null' ? '30' : '<%=request.getParameter("leftNum")%>';
	var rightNum = '<%=request.getParameter("rightNum")%>' == 'null' ? '30' : '<%=request.getParameter("rightNum")%>'; 
	var ds={};
	Ext.onReady(function(){
		Ext.QuickTips.init();
		ds = new Ext.data.Store({
			proxy:new Ext.data.HttpProxy({
				url:'searchAction.action'
			}),
			reader:new Ext.data.JsonReader({
				root:'data',
				totalProperty: 'totalCount',
				id:'articleId'
			},[
			   {name:'author',mapping:'AUTHOR'},
			   {name:'articleId', mapping:'ARTICLE_ID'},
			   {name:'articleName', mapping:'ARTICLE_NAME'},
			   {name:'content',mapping:'CONTENT'},
			   {name:'ct',mapping:'CT'}
			]),
			baseParams:{limit:20,
				query:queryStr,
//				language:'<%=request.getParameter("language")%>',
			//	num:1,
				leftNum:leftNum,
				rightNum:rightNum
			}
		});
		var resultTpl = new Ext.XTemplate(
				'<tpl for=".">',
		        '<div class="search-item">',
		            '<br />',
		            '<span id="a_{articleId}">{content}</span><br /><br />',
		           	'<span><b>出处:&nbsp<a href="javascript:void(0);">{articleName}</a>&nbsp&nbsp作者:&nbsp{author}</b><span><br /><br />',
		        '</div>',
		        '</tpl>'
		    );
		var panel = new Ext.Viewport({
			layout:'border',
			items:[new Ext.Panel({
				region:'center',
				autoScroll:true,
				items:[new Ext.DataView({
		            tpl: resultTpl,
		            store: ds,
		            itemSelector: 'div.search-item',
		            emptyText: '<br /><br />&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp很抱歉，没有找到符合检索条件的实例。'+
		            		   '<br /><br />&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp·&nbsp确信所有的字串正确无误。'+
		            		   '<br /><br />&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp·&nbsp尽可能简洁。'+
		            		   '<br /><br />&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp·&nbsp尽可能使用常规字串。'+
		            		   '<br /><br />&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp·&nbsp试用不同的关键字<br /><br /><br /><br />'

		        })],
		        bbar:new Ext.lams.comp.PagingToolbar({
		            store: ds,
		            isExcel:false
		        })
			}),{
	        	region:'north',
	        	height:70,
	        	html:	'<div>'+
							'&nbsp&nbsp&nbsp<img src="../image/logo/logo-en.png"/ ><br />'+
							'&nbsp&nbsp&nbsp<input type="text" size="50" name="query" id="query"/>  '+
							'<input type="button" value="语料搜索" onclick="search();"/>  '+
						'</div>'

	        }],
		});
		ds.load({params:{start:0, limit:20}});
		Ext.getDom("query").value = queryStr;
		panel.show();
		ds.on('load',function(a,d,c){
			nums = {};
			queryStr = c.params.query;
			//Ext.apply(ds.baseParams,{query:queryStr});
			ds.setBaseParam('query',queryStr);
		});
	});
	function search(){
		queryStr = Ext.getDom("query").value;
		ds.load({params:{start:0, limit:20, query:queryStr}});
	}
</script>
</html>